<template xmlns="http://www.w3.org/1999/html">
  <div class="course_Box" style=" background-color: #fafafa">
    <div class="course_Pc">
      <el-row class="tac">
        <el-col :span="6">
          <h4>视频教程</h4>
          <el-menu
            :default-active="2-1"
            default-active="2-1"
            :default-openeds="openeds"
            class="couse"
            @open="handleOpen"
            @close="handleClose">

            <el-submenu index="2"  style="width: 100%">
              <template #title>
                <i class="el-icon-location"></i>
                <span>芸助手-电脑端</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="memuitem">人工报单</el-menu-item>
                <el-menu-item index="2-2" @click="memuitem">订单核销</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="1" style="width: 100%">
              <template #title>
                <i class="el-icon-location"></i>
                <span>芸助手-手机端</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="memuitem">人工报单</el-menu-item>
                <el-menu-item index="1-2" @click="memuitem">确认送达</el-menu-item>
                <el-menu-item index="1-3" @click="memuitem">订单核销</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :span="6" class="course_Play">
          <div v-if="index== '1-1'">
            <div style="padding: 20px 0">人工报单</div>
            <iframe class="course_Play_Box" src='https://player.youku.com/embed/XNTE0MjMwMzI0NA==' frameborder=0 allowfullscreen="true"></iframe>
          </div>
          <div v-if="index== '1-2'">
            <div style="padding: 20px 0">确认送达</div>
            <iframe class="course_Play_Box" src='https://player.youku.com/embed/XNTE0NjM0OTIyOA==' frameborder=0 allowfullscreen="true"></iframe>
          </div>
          <div v-if="index== '1-3'">
            <div style="padding: 20px 0">订单核销</div>
            <iframe class="course_Play_Box" src='https://player.youku.com/embed/XNTE0MjMwNTEyOA==' frameborder=0 allowfullscreen="true"></iframe>
          </div>
          <div v-if="index== '2-1'">
            <div style="padding: 20px 0">人工报单</div>
            <iframe class="course_Play_Box" src='https://player.youku.com/embed/XNTE2MzIzMjA2NA==' frameborder=0 allowfullscreen="true"></iframe>
          </div>
          <div v-if="index== '2-2'">
            <div style="padding: 20px 0">订单核销</div>
            <iframe class="course_Play_Box" src='https://player.youku.com/embed/XNTE2MzIzMjA2NA==' frameborder=0 allowfullscreen="true"></iframe>
          </div>
        </el-col>
      </el-row>
    </div>
        <!--    手机端显示-->
    <div>
      <div class="course_Move">
        <div style="text-align: center; font-size: 20px; font-weight: 700; padding-bottom: 20px;">视频教程</div>
<!--        App视频-->
        <div class="course_App_Box">
          <div style="font-size: 15px; font-weight: 500; padding: 10px;">App</div>
          <div class="course_App_Play">
            <span style="font-size: 15px; font-weight: 500; ">报单：</span>
            <a href="https://v.youku.com/v_show/id_XNTE0MjMwMzI0NA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5!4~A">
              <el-row>
                <el-button type="primary" round> ▶︎ 点击播放</el-button>
              </el-row>
            </a>
          </div>
            <div class="course_App_Play">
              <span style="font-size: 15px; font-weight: 500; ">送达：</span>
              <a href="https://v.youku.com/v_show/id_XNTE0MjMwMzI0NA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5!4~A">
                <el-row>
                  <el-button type="success" round> ▶︎ 点击播放</el-button>
                </el-row>
              </a>
            </div>
              <div class="course_App_Play">
                <span style="font-size: 15px; font-weight: 500; ">核销：</span>
                <a href="https://v.youku.com/v_show/id_XNTE0MjMwMzI0NA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5!4~A">
                  <el-row>
                    <el-button type="danger" round> ▶︎ 点击播放</el-button>
                  </el-row>
                </a>
              </div>
            </div>
<!--        <el-divider content-position="center" ><sapn  style="color: #adadad">分割线</sapn></el-divider>-->
<!--        PC视频-->
        <div class="course_App_Box_Two">
          <div style="font-size: 15px; font-weight: 500; padding: 10px;">PC</div>
            <div class="course_App_Play_Two">
              <span style="font-size: 15px; font-weight: 500; ">报单：</span>
              <a href="https://v.youku.com/v_show/id_XNTE2MzIzMjA2NA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5~A!2">
                <el-row>
                  <el-button type="primary" round> ▶︎ 点击播放</el-button>
                </el-row>
              </a>
            </div>
            <div class="course_App_Play_Two">
              <span style="font-size: 15px; font-weight: 500; ">核销：</span>
              <a href="https://v.youku.com/v_show/id_XNTE2MzIzMTAwMA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5!2~A!2">
                <el-row>
                  <el-button type="danger" round> ▶︎ 点击播放</el-button>
                </el-row>
              </a>
            </div>
          </div>
        <el-divider content-position="center"><span  style="color: #adadad" >已经到底啦！</span></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'course',
  data(){
    return{
      index:'0',
      openeds:['1','2','1-1']
    }
  },
  props:[
    'indexBottom'
  ],
  created() {
    console.log(this.indexBottom)
    console.log('下载')
    this.index = this.indexBottom
  },
  methods:{
    handleOpen(data){
      console.log(data)
    },
    handleClose(){

    },
    memuitem(data){
      console.log(data)
      this.index=data.index
    }
  }
}
</script>

<style scoped>

  @media screen and (min-width: 0) and (max-width: 350px){
    .course_Pc {
      display: none;
    }
    .course_Move {
      height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 20px;
    }
    .course_App_Box {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #FFFFFF;
    }

    .course_App_Box_Two {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #ededed;
    }
    .course_App_Play {
      width: 100%;
      height: auto;
      background-color: #FFFFFF;
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
    .course_App_Play_Two {
      width: 100%;
      height: auto;
      background-color: #ededed;
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
  }

  @media screen and (min-width: 351px) and (max-width: 750px){
    .course_Pc {
     display: none;
    }
    .course_Move {
      height: 85vh;
      display: flex;
      flex-direction: column;
      padding: 20px;
    }
    .course_App_Box {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #FFFFFF;
    }

    .course_App_Box_Two {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #ededed;
    }
    .course_App_Play {
      width: 100%;
      height: auto;
      background-color: #FFFFFF;
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
  }
    .course_App_Play_Two {
      width: 100%;
      height: auto;
      background-color: #ededed;
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
  }

  @media screen and (min-width: 751px) and (max-width: 800px){
    .course_Box {
      width: 100%;
      height: 100vh;
    }
    .course_Move {
      display: none;
    }
    .tac {
      padding: 40px;
      width: 100%;
    }
    .course_Play {
      padding-left: 40px;
    }
    .course_Play_Box {
      width: 500px;
      height: 350px;
    }
    /deep/.el-menu-item {
     min-width: 25%;
    }
  }
  @media screen and (min-width: 800px) and (max-width: 1199px){
    .course_Box {
      height: 100vh;
      display: flex;
      justify-content: center;
    }
    .course_Move {
      display: none;
    }
    .tac {
      padding: 40px;
      width: 100%;
    }
    .course_Play {
      padding-left: 40px;
    }
    .course_Play_Box {
      width: 600px;
      height: 500px;
    }
  }
  @media screen and (min-width: 1200px){
    .course_Box {
      height: 100vh;
      display: flex;
      justify-content: center;
    }
    .course_Move {
      display: none;
    }
    .tac {
      width: 1200px;
      padding: 40px;
    }
    .course_Play {
      padding-left: 40px;
    }
    .course_Play_Box {
      height: 75vh;
      width: 800px;
    }
  }
  /deep/.el-divider__text{
    background-color: #fafafa;

  }
</style>
